<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>elimarias.com</title>
<style type="text/css">
body {
  margin: 0;
  padding: 0;
} 
div{
	position:absolute;
}

.title{
	overflow:hidden;
	color:#aaaaaa;
	font-family:Arial,Helvetica,sans-serif;
	font-size:30px;
	text-align:justify;
	left:370px;
	top:300px;
	position:absolute;
	}

.dragStyle {
	/*width: 150px;*/
	/*height: 200px;*/
	border: 3px solid #fff;
	/*padding: 10px;*/
	background-color: #fff;
	position: absolute;
	/*top: 100px;*/
	/*left: 10px;*/
	cursor: pointer;
	
}


div#contact{
	color:#999;
	font-family:Arial,Helvetica,sans-serif;
	font-size:30px;
	text-align:justify;
	padding: 10px;
	width:400px;
	height:150px;
	top:1530px;
	left:3730px;
}



div#menuWrapper{
	position: fixed;
	bottom: 20px;
	left: 150px;
	/*overflow:hidden;*/
	color:#999;
	font-family:Arial,Helvetica,sans-serif;
	font-size:20px;
	text-align:left;
	z-index:500;

}

.slipper{
	height:10px;
	width:10px;
	bottom:25px;
	background-color:#888;
	display:none;
}


a{
	color:#999;
	font-family:Arial,Helvetica,sans-serif;
	font-size:20px;
	text-decoration:none;
	}
a:visited{
	color:#999
	}

div.dragged {
	cursor: all-scroll !important;
	/*border-color: #fed678 !important;*/
	z-index: 300 !important;
}

a.keyLink {
	position: absolute;
	top: -2px;
	right: -2px;
	width: 20px;
	height: 20px;
	border: none;
	/*background-image: none;
	font-size: 100%;
	text-align: center;
	padding: 0;
	background-color: #ffffff;
	opacity: 0; */
}

div.dragged a.keyHTML,a.keyHTML:focus {
	/*border-color: #888888;*/
}


img {
	border:none;
	display:block;
}

a.keyLink:visited {
	border: none;
}

a.keyLink:hover {
	border: 1px solid #fff;
}

button::-moz-focus-outer, ::-moz-focus-inner {
	border:none!important;
}

.dragStyle:hover{
       cursor:move;
       border:3px solid #999;
}

#tNails{
       position:absolute;
       visibility:hidden;
       z-index:1;
}
	
</style>

<script type="text/javascript" src="js/dragdrop.js"></script>

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<script type="text/javascript" src="js/slipTo.js"></script>

</head>

<body>

<div id="wrapper" style="width:5200px;height:4000px;background-color:#fff;">
 <!--<img src="images/IMG_4253BG1.jpg" alt="" />-->
 
 <div id="title01" class="title">
 ELI MARIAS
 </div>

<div id="menuWrapper" style="width:600px;height:40px;" >
	<img style="position:relative;top:5px;left:-150px;" src="images/menubg1.png" alt=""  />
	<div id="textwrapper" style="top:15px;left:30px;">
		photo collections
		<div id="menu0" style="top:0px;left:180px;cursor:pointer;" onmouseup="slipTo(1430,0,80,1,false);" onmouseover="hiLiteBox.up(0);" onmouseout="hiLiteBox.dn(0);">
			<div id="hiBox0" class="slipper"></div><b>MOJA</b>
		</div><!--menu0-->
		<div id="menu1" style="top:0px;left:255px;cursor:pointer;" onmouseup="slipTo(1430,1080,80,1,false);" onmouseover="hiLiteBox.up(1);" onmouseout="hiLiteBox.dn(1);">
			<div id="hiBox1" class="slipper"></div><b>MBILI</b>
		</div><!--menu1-->
		<div id="menu2" style="top:0px;left:325px;cursor:pointer;" onmouseup="slipTo(1430,2180,80,1,false);" onmouseover="hiLiteBox.up(2);" onmouseout="hiLiteBox.dn(2);">
			<div id="hiBox2" class="slipper"></div><b>TATU</b>
		</div><!--menu2-->
		
			<div id="tNail" style="top:0px;left:400px;cursor:pointer;"><span onclick="document.getElementById('tNails').style.visibility = (document.getElementById('tNails').style.visibility == 'hidden')?'visible':'hidden';">thumbs</span>
		</div>
		<div id="menu3" style="top:0px;left:485px;cursor:pointer;" onmouseup="slipTo(3380,1280,80,1,false);" onmouseover="hiLiteBox.up(3);" onmouseout="hiLiteBox.dn(3);">
			<div id="hiBox3" class="slipper"></div>contact
		</div><!--menu3-->
		<div id="menu4" style="top:0px;left:565px;" onmouseover="hiLiteBox.up(4);" onmouseout="hiLiteBox.dn(4);">
			<div id="hiBox4" class="slipper"></div><a href="http://www.elimarias.com/video/">video</a>
		</div><!--menu4-->
	</div><!--textwrapper-->
</div><!--menuWrapper-->

<div id="contact" >
	Contact Info.<br />
	<b>310 . 717 . 9073<br />
	<a href="mailto:eli@elimarias.com"style="font-size:30px;" target="_blank">eli[at]elimarias.com</a></b>
</div><!--contact-->

<div id="tNails" style="visibility:hidden">
	<div id="tNailsBG" style="left:0px;top:0px;width:5200px;height:4000px;background-color:#000;">
	<div id="mojanails" style="left:1300px;top:100px;">

<table cellspacing="20px">
 <tr>
  <td>
  <a href="images/01/moja-13.jpg"  rel="lightbox[01]"><img src="images/01/thumb/moja-13.jpg"></a>
 </td>
        	<td><img src="images/01/thumb/moja-12.jpg"></td>
        	<td><img src="images/01/thumb/moja-11.jpg"></td>
        	<td><img src="images/01/thumb/moja-10.jpg"></td>
    	</tr>
    	<tr>
        	<td><img src="images/01/thumb/moja-9.jpg"></td>
        	<td><img src="images/01/thumb/moja-8.jpg"></td>
        	<td><img src="images/01/thumb/moja-7.jpg"></td>
        	<td><img src="images/01/thumb/moja-6.jpg"></td>
    	</tr>
    	<tr>
        	<td><img src="images/01/thumb/moja-5.jpg"></td>
        	<td><img src="images/01/thumb/moja-4.jpg"></td>
        	<td><img src="images/01/thumb/moja-3.jpg"></td>
        	<td><img src="images/01/thumb/moja-2.jpg"></td>
    	</tr>
    	<tr>
        	<td colspan="4"><img src="images/01/thumb/moja-1.jpg"></td>
        </tr>
		</table>
		</div>
	</div>
</div>
<!--<table cellspacing="20px">
<tr>
        <td><a href="images/01/moja-1.jpg"  rel="lightbox[01]" class="keyLink"><img src="images/01/thumb/moja-1.jpg"></a></td>
        <td><a href="images/01/moja-2.jpg"  rel="lightbox[01]" class="keyLink"><img src="images/01/thumb/moja-2.jpg"></a></td>
        <td><a href="images/01/moja-3.jpg"  rel="lightbox[01]" class="keyLink"><img src="images/01/thumb/moja-3.jpg"></a></td>
        <td><a href="images/01/moja-4.jpg"  rel="lightbox[01]" class="keyLink"><img src="images/01/thumb/moja-4.jpg"></a></td>
    </tr>
    <tr>
        <td><a href="images/01/moja-5.jpg"  rel="lightbox[01]" class="keyLink"><img src="images/01/thumb/moja-5.jpg"></a></td>
        <td><a href="images/01/moja-6.jpg"  rel="lightbox[01]" class="keyLink"><img src="images/01/thumb/moja-6.jpg"></a></td>
        <td><a href="images/01/moja-7.jpg"  rel="lightbox[01]" class="keyLink"><img src="images/01/thumb/moja-7.jpg"></a></td>
        <td><a href="images/01/moja-8.jpg"  rel="lightbox[01]" class="keyLink"><img src="images/01/thumb/moja-8.jpg"></a></td>
    </tr>
    <tr>
        <td><a href="images/01/moja-9.jpg"  rel="lightbox[01]" class="keyLink"><img src="images/01/thumb/moja-9.jpg"></a></td>
        <td><a href="images/01/moja-10.jpg"  rel="lightbox[01]" class="keyLink"><img src="images/01/thumb/moja-10.jpg"></a></td>
        <td><a href="images/01/moja-11.jpg"  rel="lightbox[01]" class="keyLink"><img src="images/01/thumb/moja-11.jpg"></a></td>
        <td><a href="images/01/moja-12.jpg"  rel="lightbox[01]" class="keyLink"><img src="images/01/thumb/moja-12.jpg"></a></td>
    </tr>
    <tr>
        <td><a href="images/01/moja-13.jpg"  rel="lightbox[01]" class="keyLink"><img src="images/01/thumb/moja-13.jpg"></a></td>
       
</tr></table>
</div>
--!>



<div id="picWrapper0" style="left:1300px;top:100px;">
	<div id="pic12" style="left:195px;top:351px;position:absolute;">
		<img src="images/01/thumb/moja-1.jpg" alt=""  />
		<a href="images/01/moja-1.jpg"  rel="lightbox[01]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic12-->
	
	<div id="pic11" style="left:648px;top:383px;position:absolute;">
		<img src="images/01/thumb/moja-2.jpg" alt=""  />
		<a href="images/01/moja-2.jpg"  rel="lightbox[01]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic11-->

	<div id="pic10" style="left:850px;top:240px;position:absolute;">
		<img src="images/01/thumb/moja-3.jpg" alt=""  />
		<a href="images/01/moja-3.jpg"  rel="lightbox[01]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic10-->
	
	<div id="pic9" style="left:394px;top:397px;position:absolute;">
		<img src="images/01/thumb/moja-4.jpg" alt=""  />
		<a href="images/01/moja-4.jpg"  rel="lightbox[01]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic9-->
	
	<div id="pic8" style="left:231px;top:110px;position:absolute;">
		<img src="images/01/thumb/moja-5.jpg" alt=""  />
		<a href="images/01/moja-5.jpg" rel="lightbox[01]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic8-->
	
	<div id="pic7" style="left:467px;top:-47px;position:absolute;">	
		<img src="images/01/thumb/moja-6.jpg" alt=""  />
		<a href="images/01/moja-6.jpg"  rel="lightbox[01]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic7-->
	
	<div id="pic6" style="left:789px;top:21px;position:absolute;">
		<img src="images/01/thumb/moja-7.jpg" alt=""  />
		<a href="images/01/moja-7.jpg"  rel="lightbox[01]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic6-->
	
	<div id="pic5" style="left:732px;top:338px;position:absolute;">	
		<img src="images/01/thumb/moja-8.jpg" alt=""  />
		<a href="images/01/moja-8.jpg"  rel="lightbox[01]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic5-->
	
	<div id="pic4" style="left:325px;top:277px;position:absolute;">
		<img src="images/01/thumb/moja-9.jpg" alt=""  />
		<a href="images/01/moja-9.jpg"  rel="lightbox[01]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic4-->

	<div id="pic3" style="left:403px;top:60px;position:absolute;">	
		<img src="images/01/thumb/moja-10.jpg" alt=""  />
		<a href="images/01/moja-10.jpg"  rel="lightbox[01]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic3-->
	
	<div id="pic2" style="left:710px;top:80px;position:absolute;">	
		<img src="images/01/thumb/moja-11.jpg" alt=""  />
		<a href="images/01/moja-11.jpg"  rel="lightbox[01]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic2-->
	
	<div id="pic1" style="left:639px;top:276px;position:absolute;">
		<img src="images/01/thumb/moja-12.jpg" alt=""  />
		<a href="images/01/moja-12.jpg"  rel="lightbox[01]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic1-->
	
	<div id="pic0" style="left:511px;top:190px;position:absolute;">
		<img src="images/01/thumb/moja-13.jpg" alt=""  />
		<a href="images/01/moja-13.jpg"  rel="lightbox[01]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic0-->
</div><!--picWrapper0-->




<div id="picWrapper1" style="left:1450px;top:1200px;">
	<div id="pic13" style="left:667px;top:305px;position:absolute;">
		<img src="images/02/thumb/mbili-1.jpg" alt=""  />
		<a href="images/02/mbili-1.jpg"  rel="lightbox[02]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic13-->
	
	<div id="pic14" style="left:695px;top:35px;position:absolute;">
		<img src="images/02/thumb/mbili-2.jpg" alt=""  />
		<a href="images/02/mbili-2.jpg"  rel="lightbox[02]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic14-->

	<div id="pic15" style="left:448px;top:-39px;position:absolute;">
		<img src="images/02/thumb/mbili-3.jpg" alt=""  />
		<a href="images/02/mbili-3.jpg"  rel="lightbox[02]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic15-->
	
	<div id="pic16" style="left:202px;top:10px;position:absolute;">
		<img src="images/02/thumb/mbili-4.jpg" alt=""  />
		<a href="images/02/mbili-4.jpg"  rel="lightbox[02]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic16-->
	
	<div id="pic17" style="left:75px;top:172px;position:absolute;">
		<img src="images/02/thumb/mbili-5.jpg" alt=""  />
		<a href="images/02/mbili-5.jpg"  rel="lightbox[02]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic17-->
	
	<div id="pic18" style="left:128px;top:372px;position:absolute;">	
		<img src="images/02/thumb/mbili-6.jpg" alt=""  />
		<a href="images/02/mbili-6.jpg"  rel="lightbox[02]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic18-->
	
	<div id="pic19" style="left:275px;top:432px;position:absolute;">
		<img src="images/02/thumb/mbili-7.jpg" alt=""  />
		<a href="images/02/mbili-7.jpg"  rel="lightbox[02]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic19-->
	
	<div id="pic20" style="left:555px;top:382px;position:absolute;">	
		<img src="images/02/thumb/mbili-8.jpg" alt=""  />
		<a href="images/02/mbili-8.jpg"  rel="lightbox[02]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic20-->
	
	<div id="pic21" style="left:645px;top:182px;position:absolute;">
		<img src="images/02/thumb/mbili-9.jpg" alt=""  />
		<a href="images/02/mbili-9.jpg"  rel="lightbox[02]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic21-->

	<div id="pic22" style="left:487px;top:279px;position:absolute;">	
		<img src="images/02/thumb/mbili-10.jpg" alt=""  />
		<a href="images/02/mbili-10.jpg"  rel="lightbox[02]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic22-->
	
	<div id="pic23" style="left:281px;top:319px;position:absolute;">	
		<img src="images/02/thumb/mbili-11.jpg" alt=""  />
		<a href="images/02/mbili-11.jpg"  rel="lightbox[02]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic23-->
	
	<div id="pic24" style="left:260px;top:176px;position:absolute;">
		<img src="images/02/thumb/mbili-12.jpg" alt=""  />
		<a href="images/02/mbili-12.jpg"  rel="lightbox[02]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic24-->
	
	<div id="pic25" style="left:506px;top:160px;position:absolute;">
		<img src="images/02/thumb/mbili-13.jpg" alt=""  />
		<a href="images/02/mbili-13.jpg"  rel="lightbox[02]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic25-->
	
	<div id="pic26" style="left:390px;top:227px;position:absolute;">
		<img src="images/02/thumb/mbili-14.jpg" alt=""  />
		<a href="images/02/mbili-14.jpg"  rel="lightbox[02]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic26-->
	
</div><!--picWrapper1-->





<div id="picWrapper2" style="left:1750px;top:2400px;">
	<div id="pic27" style="left:-210px;top:75px;position:absolute;">
		<img src="images/03/thumb/tatu-1.jpg" alt=""  />
		<a href="images/03/tatu-1.jpg"  rel="lightbox[03]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic27-->
	
	<div id="pic28" style="left:688px;top:287px;position:absolute;">
		<img src="images/03/thumb/tatu-2.jpg" alt=""  />
		<a href="images/03/tatu-2.jpg"  rel="lightbox[03]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic28-->

	<div id="pic29" style="left:457px;top:393px;position:absolute;">
		<img src="images/03/thumb/tatu-3.jpg" alt=""  />
		<a href="images/03/tatu-3.jpg"  rel="lightbox[03]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic29-->
	
	<div id="pic30" style="left:144px;top:428px;position:absolute;">
		<img src="images/03/thumb/tatu-4.jpg" alt=""  />
		<a href="images/03/tatu-4.jpg"  rel="lightbox[03]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic30-->
	
	<div id="pic31" style="left:-53px;top:305px;position:absolute;">
		<img src="images/03/thumb/tatu-5.jpg" alt=""  />
		<a href="images/03/tatu-5.jpg"  rel="lightbox[03]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic31-->
	
	<div id="pic32" style="left:-88px;top:181px;position:absolute;">	
		<img src="images/03/thumb/tatu-6.jpg" alt=""  />
		<a href="images/03/tatu-6.jpg"  rel="lightbox[03]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic32-->
	
	<div id="pic33" style="left:-41px;top:-5px;position:absolute;">
		<img src="images/03/thumb/tatu-7.jpg" alt=""  />
		<a href="images/03/tatu-7.jpg"  rel="lightbox[03]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic33-->
	
	<div id="pic34" style="left:242px;top:-10px;position:absolute;">	
		<img src="images/03/thumb/tatu-8.jpg" alt=""  />
		<a href="images/03/tatu-8.jpg"  rel="lightbox[03]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic34-->
	
	<div id="pic35" style="left:546px;top:-9px;position:absolute;">
		<img src="images/03/thumb/tatu-9.jpg" alt=""  />
		<a href="images/03/tatu-9.jpg"  rel="lightbox[03]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic35-->

	<div id="pic36" style="left:543px;top:166px;position:absolute;">	
		<img src="images/03/thumb/tatu-10.jpg" alt=""  />
		<a href="images/03/tatu-10.jpg"  rel="lightbox[03]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic36-->
	
	<div id="pic37" style="left:410px;top:264px;position:absolute;">	
		<img src="images/03/thumb/tatu-11.jpg" alt=""  />
		<a href="images/03/tatu-11.jpg"  rel="lightbox[03]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic37-->
	
	<div id="pic38" style="left:160px;top:297px;position:absolute;">
		<img src="images/03/thumb/tatu-12.jpg" alt=""  />
		<a href="images/03/tatu-12.jpg"  rel="lightbox[03]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic38-->
	
	<div id="pic39" style="left:104px;top:151px;position:absolute;">
		<img src="images/03/thumb/tatu-13.jpg" alt=""  />
		<a href="images/03/tatu-13.jpg"  rel="lightbox[03]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic39-->
	
	<div id="pic40" style="left:349px;top:100px;position:absolute;">
		<img src="images/03/thumb/tatu-14.jpg" alt=""  />
		<a href="images/03/tatu-14.jpg"  rel="lightbox[03]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic40-->
	
	<div id="pic41" style="left:238px;top:185px;position:absolute;">
		<img src="images/03/thumb/tatu-15.jpg" alt=""  />
		<a href="images/03/tatu-15.jpg"  rel="lightbox[03]" class="keyLink">
			<img src="images/fscreen.jpg" alt=""  />
		</a>
	</div><!--pic41-->

</div><!--picWrapper2-->

</div> <!--wrapper-->


<script type="text/javascript">
<!--//

//////////////////////////////////////////////////
// configure below this line

var numOfDrags = 42;

for(var i=0;i<numOfDrags;i++){
 var tmpDivId = 'pic'+i;
 var tmpDiv = document.getElementById(tmpDivId);
 tmpDiv.setAttribute('class','dragStyle');
 dragDrop.initElement(tmpDivId);

}


dragDrop.initElement('menuWrapper');
dragDrop.alwaysTop('menuWrapper');


//-->
</script>

</body>
</html>
